<template>
  <div class="ke-collect">
    <div class="title">我的收藏</div>
    <div class="course-wrapper">
      <div class="content" v-if="(course.length === 0)">抱歉，您当前还没有收藏任何课程</div>
      <swiper ref="mySwiper" :options="swiperOptions" class="courseList" v-else @click-slide="handleToOpencourse">
        <swiper-slide class="item" v-for="(item, index) in course" :key="index">
          <ke-intro :courseName="item.coursename" :price="item.price" :buyNumber="item.buyNum" />
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ke-collect',
  components: {
    keIntro: () => import('../ke-intro')
  },
  data() {
    return {
      course: [],
      swiperOptions: {
        direction: 'horizontal',
        spaceBetween: 10,
        width: 240,
        preventClicks : false
      }
    }
  },
  mounted() {
    this.getBuyCourse()
  },
  methods: {
    getBuyCourse() {
      this.$axios
        .get('/api/user/userCollect', {
          headers: {
            userId: localStorage.getItem('ke_id')
          }
        })
        .then(res => {
          this.course = res.data.data
          this.swiperOptions.loopedSlides = this.course.length
        })
    },
    handleToOpencourse(index) {
      this.$store.dispatch('setCourse', this.course[index])
      this.$router.push('/course/overview')
    }
  }
}
</script>

<style lang="stylus" scoped>
.ke-collect {
  .title {
    font-size: 22px;
    margin-bottom: 20px;
    line-height: 1.3;
  }

  .course-wrapper {
    .content {
      text-align: center;
      margin-top: 200px;
      font-size: 14px;
      color: #999999;
    }

    .courseList {
      height: 250px;
      overflow: hidden;
      padding-left: 0;
      overflow: hidden;
      border-top: 8px solid #eeeeee;
      padding-top: 8px;
      box-sizing: border-box;

      .item {
        list-style: none;
        float: left;
        width: 240px !important;
        height: 234px;
        box-sizing: border-box;
        cursor: pointer;
        border: 1px solid transparent;

        &:hover {
          border: 1px solid #dddddd;
        }
      }
    }
  }
}
</style>
